<template>
  <div>
    <cusDialog ref="dialogRef" :title="mealForm.id ? '修改' : '添加'" headCss="float:left;" @hideHandler="hideHandler"
      :confrimText="mealForm.id ? '修改' : '添加'" @confrim="confrimHandler" width="400px">
      <el-form ref="mealFormRef" :model="mealForm" label-width="80px" :rules="rules">
        <el-form-item label="餐段名称" prop="mealSegmentName">
          <el-input v-model="mealForm.mealSegmentName" maxlength="30" placeholder="请输入餐段名称"
            :disabled="modifyName"></el-input>
        </el-form-item>
        <el-form-item label="餐段时间" prop="mealTime">
          <el-time-picker v-model="mealForm.mealTime" format="HH:mm" value-format="HH:mm" is-range range-separator="至"
            start-placeholder="开始时间" end-placeholder="结束时间" />
        </el-form-item>
        <el-form-item label="需要留样">
          <el-switch v-model="mealForm.isKeep" :active-value="1" :inactive-value="0" />
        </el-form-item>

      </el-form>
    </cusDialog>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { reqAddMeal, reqModifyMeal } from "@/api/business/dishes";
const router = useRouter();
const dialogRef = ref(null);
const mealFormRef = ref(null);

const formOrigin = () => ({
  mealSegmentName: "",
  mealTime: [],
  isKeep: 0,
  id: "",
  isDefault: ''
});

const emits = defineEmits<{
  (event: "onInit"): void;
}>();

const mealForm = ref(formOrigin());

const rules = reactive({
  mealSegmentName: {
    required: true,
    message: "餐段名称不能为空",
    tirgger: "blur",
  },
  mealTime: {
    required: true,
    message: "请选择开始时间与结束时间",
    tirgger: "blur",
    pattern: /.+/,
  },
});

// 展示对话框
const showHandler = (row) => {
  if (row) {
    let mealTime = [];
    mealTime[0] = row.gmtStart;
    mealTime[1] = row.gmtEnd;
    mealForm.value = row;
    mealForm.value.mealTime = mealTime;
  }
  dialogRef.value.show = true;
};
// 对话框关闭重置初始数据
const hideHandler = () => {
  mealForm.value = formOrigin();
  mealFormRef.value.resetFields();
};
const confrimHandler = () => {
  mealFormRef.value.validate((valid, fields) => {
    if (valid) {
      if (mealForm.value.id) {
        getModifyMeal();
      } else {
        getAddMeal();
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

const getModifyMeal = () => {
  reqModifyMeal({
    gmtStart: mealForm.value.mealTime[0],
    gmtEnd: mealForm.value.mealTime[1],
    isKeep: Number(mealForm.value.isKeep),
    mealSegmentName: mealForm.value.mealSegmentName,
    id: mealForm.value.id,
  }).then((res) => {
    if (res.code == 1) {
      ElMessage.success("修改成功");
      dialogRef.value.show = false;
      emits("onInit");
    } else {
      ElMessage.info(res.msg);
    }
  });
};

const getAddMeal = () => {
  reqAddMeal({
    gmtStart: mealForm.value.mealTime[0],
    gmtEnd: mealForm.value.mealTime[1],
    isKeep: Number(mealForm.value.isKeep),
    mealSegmentName: mealForm.value.mealSegmentName,
  }).then((res) => {
    if (res.code == 1) {
      ElMessage.success("添加成功");
      dialogRef.value.show = false;
      emits("onInit");
    } else {
      ElMessage.info(res.msg);
    }
  });
};

const modifyName = computed(() => {
  return mealForm.value.isDefault && mealForm.value.id ? true : false
})

defineExpose({ showHandler });
</script>

<style lang="scss" scoped></style>